<template>
  <div class="portfolio-view">
    <div class="portfolio-view__header">
      <h1 class="portfolio-view__title">我的作品集</h1>
      <p class="portfolio-view__subtitle">精选创意作品和项目展示</p>
    </div>

    <div class="portfolio-view__filters">
      <button class="portfolio-filter-btn" :class="{ 'active': activeCategory === 'all' }"
        @click="filterProjects('all')">
        全部作品
      </button>
      <button v-for="category in categories" :key="category.id" class="portfolio-filter-btn"
        :class="{ 'active': activeCategory === category.id }" @click="filterProjects(category.id)">
        {{ category.name }}
      </button>
    </div>

    <transition-group name="portfolio-grid" tag="div" class="portfolio-view__grid">
      <div v-for="project in filteredProjects" :key="project.id" class="portfolio-item">
        <div class="portfolio-item__image-container">
          <img :src="project.imageUrl" :alt="project.title" class="portfolio-item__image" />
          <div class="portfolio-item__overlay">
            <span class="portfolio-item__view" @click="navigateTo(project.link)">查看项目</span>
          </div>
        </div>
        <h3 class="portfolio-item__title">{{ project.title }}</h3>
        <p class="portfolio-item__description">{{ project.description }}</p>
        <div class="portfolio-item__tags">
          <span v-for="(tag, index) in project.tags" :key="index" class="portfolio-item__tag">
            {{ tag }}
          </span>
        </div>
      </div>
    </transition-group>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import communityPng from '@/assets/myProject/community.png'
import sjkPng from '@/assets/myProject/sjk.png'
import shopPng from '@/assets/myProject/shop.png'
import sheying1Png from '@/assets/myProject/sheying1.png'
import wangzhanPng from '@/assets/myProject/wangzhan.png'
import maoPng from '@/assets/myProject/mao.png'
// 定义项目类别
const categories = [
  { id: 'web', name: '网站设计' },
  { id: 'app', name: '移动应用' },
  { id: 'graphics', name: '平面设计' },
  { id: 'photography', name: '摄影作品' }
]

// 示例项目数据
const projects = [
  {
    id: 1,
    title: '社区志愿者活动管理系统',
    description: '毕业设计项目，旨在提升社区志愿者活动的组织和管理效率,网上接的毕设，只有前端，小赚600',
    imageUrl: communityPng,
    category: 'web',
    link: 'http://bysj.zhoutaotao.cn',
    tags: ['HTML5', 'CSS3', 'Vue.js', 'JavaScript', ' Node.js', 'Express.js']
  },
  {
    id: 2,
    title: '学生宿舍管理系统',
    description: '数据库课程设计，提供学生宿舍信息管理和查询功能,待完善',
    imageUrl: sjkPng,
    category: 'app',
    link: 'http://sjk.zhoutaotao.cn',
    tags: ['MYSQL', 'NodeJs', 'Vue.js', 'JavaScript', 'Express.js']
  },
  {
    id: 3,
    title: '商城后台管理系统',
    description: '基于Vue.js的电商平台后台管理系统，提供商品、订单和用户管理功能。哔站学习项目，第一次被hooks折磨得头疼，账号密码都是admin',
    imageUrl: shopPng,
    category: 'graphics',
    link: 'http://shop.zhoutaotao.cn',
    tags: ['Vue3', 'Element Plus', 'Vite', 'JavaScript', 'Axios', 'VueUse']
  },
  {
    id: 4,
    title: '摄影静态网页1',
    description: '一组城市建筑和街景的黑白摄影作品展示',
    imageUrl: sheying1Png,
    category: 'photography',
    link: 'http://sheying.zhoutaotao.cn:3100',
    tags: ['HTML', 'CSS', 'JavaScript',]

  },
  {
    id: 5,
    title: 'HTML+CSS搭建的综合网站静态页面',
    description: '一个综合性网站的静态页面，包含多个功能模块和响应式设计。150接的web期末大作业单子',
    imageUrl: wangzhanPng,
    category: 'web',
    link: 'http://wangzhan.zhoutaotao.cn',
    tags: ['HTML', 'CSS', 'JavaScript',]
  },
  {
    id: 6,
    title: 'Hello Kitty静态网页',
    description: 'web期末大作业',
    imageUrl: maoPng,
    category: 'app',
    link: 'http://mao.zhoutaotao.cn',
    tags: ['HTML', 'CSS', 'JavaScript',]
  },
]

// 当前选中的类别
const activeCategory = ref('all')

// 根据类别筛选项目
const filteredProjects = computed(() => {
  if (activeCategory.value === 'all') {
    return projects
  }
  return projects.filter(project => project.category === activeCategory.value)
})

// 筛选函数
const filterProjects = (category: string) => {
  activeCategory.value = category
}

// 跳转函数
const navigateTo = (url: string) => {
  // 根据实际需求可以使用router.push或window.location
  // router.push(url)
  // 如果需要跳转到外部链接，可以使用：
  console.log(111);

  window.open(url, '_blank')
}
</script>

<style lang="less" scoped>
// 颜色变量
@primary-color: #3a7bd5;
@primary-light: rgba(58, 123, 213, 0.1);
@primary-hover: rgba(58, 123, 213, 0.2);
@text-color: #2c3e50;
@text-light: #5e6c84;
@bg-color: #ffffff;
@bg-light: #f9fafc;
@border-color: #edf0f5;
@transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
@container-width: 1280px;

// 主容器
.portfolio-view {
  max-width: @container-width;
  margin: 0 auto;
  padding: 0 24px 60px;

  // 头部区域
  &__header {
    text-align: center;
    margin: 40px 0 50px;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      bottom: -16px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 4px;
      background: linear-gradient(to right, @primary-color, lighten(@primary-color, 20%));
      border-radius: 2px;
    }
  }

  &__title {
    font-size: 36px;
    font-weight: 700;
    color: @text-color;
    margin-bottom: 16px;
  }

  &__subtitle {
    font-size: 18px;
    color: @text-light;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
  }

  // 筛选按钮区
  &__filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto 40px;
    gap: 12px;
  }

  // 作品网格
  &__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    width: 100%;
  }
}

// 筛选按钮
.portfolio-filter-btn {
  padding: 8px 18px;
  border: 1px solid @border-color;
  border-radius: 24px;
  background: @bg-color;
  color: @text-light;
  cursor: pointer;
  transition: @transition;
  font-size: 15px;

  &:hover {
    border-color: @primary-color;
    color: @primary-color;
    background-color: @primary-light;
  }

  &.active {
    background-color: @primary-color;
    color: white;
    border-color: @primary-color;
    box-shadow: 0 4px 12px rgba(58, 123, 213, 0.2);

    &:hover {
      background-color: darken(@primary-color, 5%);
    }
  }
}

// 单个作品项目卡片
.portfolio-item {
  background: @bg-color;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: @transition;
  height: 100%;
  display: flex;
  flex-direction: column;

  &:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-5px);

    .portfolio-item__overlay {
      opacity: 1;
    }
  }

  // 图片容器
  &__image-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    cursor: pointer;
    height: 220px;
  }

  // 图片样式
  &__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;

    &:hover {
      transform: scale(1.08);
    }
  }

  // 悬停遮罩层
  &__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(58, 123, 213, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
  }

  &__view {
    color: white;
    font-weight: 600;
    font-size: 18px;
    padding: 10px 20px;
    border: 2px solid white;
    border-radius: 24px;
    transition: all 0.2s ease;

    &:hover {
      background: white;
      color: @primary-color;
    }
  }

  // 文本内容区域
  &__title {
    font-size: 18px;
    font-weight: 600;
    margin: 20px 20px 8px;
    color: @text-color;
  }

  &__description {
    font-size: 15px;
    line-height: 1.5;
    color: @text-light;
    margin: 0 20px 16px;
    flex-grow: 1;
  }

  // 标签栏
  &__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 20px 20px;
  }

  &__tag {
    padding: 4px 12px;
    background: @primary-light;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 500;
    color: @primary-color;
  }
}

// 转场动画
.portfolio-grid-enter-active,
.portfolio-grid-leave-active {
  transition: all 0.4s ease;
}

.portfolio-grid-enter-from,
.portfolio-grid-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.portfolio-grid-move {
  transition: transform 0.6s ease;
}

// 响应式样式
@media (max-width: 1200px) {
  .portfolio-view {
    padding: 0 20px 50px;

    &__grid {
      gap: 24px;
    }

    &__header {
      margin: 35px 0 45px;
    }
  }

  .portfolio-item {
    &__image-container {
      height: 200px;
    }
  }
}

@media (max-width: 992px) {
  .portfolio-view {
    &__title {
      font-size: 32px;
    }

    &__subtitle {
      font-size: 17px;
    }

    &__grid {
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
    }

    &__filters {
      margin-bottom: 32px;
    }
  }
}

@media (max-width: 768px) {
  .portfolio-view {
    padding: 0 16px 40px;

    &__header {
      margin: 30px 0 40px;

      &::after {
        bottom: -12px;
        width: 50px;
        height: 3px;
      }
    }

    &__title {
      font-size: 28px;
      margin-bottom: 12px;
    }

    &__subtitle {
      font-size: 16px;
    }

    &__filters {
      gap: 10px;
      margin-bottom: 28px;
    }

    &__grid {
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 18px;
    }
  }

  .portfolio-filter-btn {
    padding: 7px 14px;
    font-size: 14px;
  }

  .portfolio-item {
    border-radius: 12px;

    &__title {
      font-size: 17px;
      margin: 16px 16px 6px;
    }

    &__description {
      font-size: 14px;
      margin: 0 16px 14px;
    }

    &__tags {
      margin: 0 16px 16px;
      gap: 6px;
    }

    &__tag {
      padding: 3px 10px;
      font-size: 12px;
    }

    &__image-container {
      height: 180px;
    }
  }
}

@media (max-width: 576px) {
  .portfolio-view {
    padding: 0 12px 30px;

    &__header {
      margin: 25px 0 35px;
    }

    &__title {
      font-size: 24px;
    }

    &__subtitle {
      font-size: 15px;
    }

    &__filters {
      gap: 8px;
      margin-bottom: 24px;
    }

    &__grid {
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 16px;
    }
  }

  .portfolio-filter-btn {
    padding: 6px 12px;
    font-size: 13px;
  }

  .portfolio-item {
    border-radius: 10px;

    &:hover {
      transform: translateY(-3px);
    }

    &__title {
      font-size: 15px;
      margin: 14px 12px 4px;
    }

    &__description {
      font-size: 13px;
      margin: 0 12px 10px;
      line-height: 1.4;
    }

    &__tags {
      margin: 0 12px 12px;
    }

    &__tag {
      padding: 2px 8px;
      font-size: 11px;
    }

    &__image-container {
      height: 130px;
    }

    &__view {
      font-size: 14px;
      padding: 8px 16px;
    }
  }
}
</style>